<template>
    <mt-header class="zh-header" :title="title">
      <div slot="left" class="left">
        <div v-if="leftRouter" @click="go(leftRouter)">
          <i :class="icon"></i>
          <slot name="left"></slot>
        </div>
      </div>
      <div slot="right" class="right">
        <div v-if="rightRouter" @click="go(rightRouter)">
          <slot name="right"></slot>
        </div>
      </div>
    </mt-header>
</template>

<script>
  export default {
    name: 'zh-header',
    props: {
      title: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: 'icon-fa-angle-left'
      },
      leftRouter: {},
      rightRouter: {}
    },
    methods: {
      go(router) {
        if(typeof router === 'object' && router.name) {
          if(router.replace) {
            this.$router.replace({name: router.name, query: router.query})
          }else {
            this.$router.push({name: router.name, query: router.query})
          }
        }else if(typeof router === 'number' || (typeof router === 'string' && isFinite(router))) {
          this.$router.go(parseInt(router))
        }
      }
    }
  }
</script>

<style lang="stylus">
.zh-header
  i
    vertical-align: middle
    color: white
    margin-right: 10px
  a
    color: white
  .mint-button
    font-size: .4rem
</style>
